SVG Masks with relative-positionning children in ForeignObjects - svg

I've a matter with this code, why do the foreignObject children go out from the mask ?
Here's my code http://jsbin.com/ehukom/2/
.posand .pos2should be in the mask... Where's my error?

I assume your errors are
trying only Chrome (have a look at Firefox as well) and
assuming that Chrome is right and you're in error.
The only good fix to this problem I can think of is reporting a bug.

Related

Svg rendering issue on UXP after switching to Webpack 5

The SVG on my UXP application isn't rendering correctly after I have moved to webpack 5 configuration.
I have tried a lot of ways to render it, like the ways mentioned here, but none seem to be working.
Does anyone know what I could be missing?
Image for reference

Safari MacOS Foreign Object not scaled properly inside svg

UPDTATE
Since Apple are $2 trillion company let's try and get them to fix this by submitting a bug report here: https://www.apple.com/feedback/safari.html
https://discussions.apple.com/thread/251753724?answerId=253364840022&page=1
In Chrome and Firefox there are no issues but here is the issue in safari:
its supposed to look like in chrome:
If I add fixed style="position: fixed" to the outer div then they position correct, but ther size is still the smaller one in safari.
I tried adding Body to the root of an object but that just made them disappear completely from Safari. Also this post mentions it:
Safari is not respecting scaling applied to a foreignObject
You can see very clearly hear that safari (new ie) does not respect the scaling

XPath is not working even when directly copied from Chrome inspect

I have been trying to automate my work and we use service-now for our requests. However, for the the life of me I can not get Selenium to run properly on the service-now website. It works on the login page before entering, but no matter what form of locater or x path I use it will not work. The website is dynamic so I am pretty sure xpath is needed.
I have tried directly from Google Chrome inspect as well as other xpath possibilities:
//*[#id="row_sc_request.sc_task.request_65091fb5db8163c4bc8f18df4b961921"]/td[3]/a
xpath=//a[starts-with(text(),'Open record: SCTA')]
xpath=//a[class="linked formlink" and starts-with(#aria-label='Open record: SCTA')]
This is the element copied from chrome
<a class="linked formlink" aria-label="Open record: SCTASK0067185" href="sc\\\_task.do?sys\\\_id=65091fb5db8163c4bc8f18df4b961921\\\&sysparm\\\_record\\\_target=sc\\\_task\\\&sysparm\\\_record\\\_row=1\\\&sysparm\\\_record\\\_rows=1\\\&sysparm\\\_record\\\_list=request%3D9509dbb5db8163c4bc8f18df4b96199f%5EORDERBYDESCnumber">SCTASK0067185</a>
Can someone please review my code? Any help would be appreciated!
I will suggest going with absolute XPath, I guess below note can help
Note:- if you copy XPath from Firefox it will mostly give you absolute XPath whereas chrome on another side will give relative
or the other way is to make an XPath using another stable element in the DOM tree
I hope this workout for yours. if you can share a link or inspect element snapshot showing Full DOM I can help you even better. Thanks :-)
There is a syntax error in the second xpath, this one - xpath=//a[class="linked formlink" and starts-with(aria-label='SCTA')].
In xpath the attributes must be prefixed with the "#" char; and starts-with() takes two arguments, not a boolean. So it must be:
xpath=//a[#class="linked formlink" and starts-with(#aria-label, "SCTA" )]
I don't know for sure will that make it match (it should, based on the sample), but will get you closer.
Thank you for all your answers. It turns out all I needed to do was switch the IFrame.
I am fairly new to this so I had no idea.
In my situatuion, I had to write:
"browser.switch_to.frame(browser.find_element_by_name('gsft_main'))"
where gsft_main is the name of the frame.
After doing this, then I was able to use:
browser.find_element_by_xpath("//a[#class='linked formlink' and starts-with(#aria-label, 'Open record: SCTA' )]")
and it worked out.
A solution might be to switch from an absolute xpath (the one that you find in the browser's developer tools: Copy->Copy XPath) to a relative one. For that you can install an extension like SelectorsHub and look for 'Rel XPath'
In one particular example I discovered that the absolute xpath simply did not work.

Animated Snap.SVG Easing not working

SVG to to animate some stuff and the easing does not seem to be working.
I can use the "bounce" easing and it works fine but the "easeinout" just does nothing it is exactly the same as "linear".
Has anyone encountered this where one will work and another will not? An example of my code is below:
whiteCircle.animate({transform: "t250,0,s0,s0"}, 1000, mina.easeinout);
AND
whiteCircle.animate({transform: "t250,0,s0,s0"}, 1000, mina.bounce);
Any help is appreciated!
My issue was I was using "easeInOut" with capitals in my actual code rather than "easeinout", also which didn't help was the fact I was moving moving things over large distances quite quickly so the effect was diminished.

Can somebody tell me what is wrong with the code in this page? The layout does not work properly in Safari browser

I do some work on on old tables based site. It is being replaced but I would like it to work for now.
One of the pages in question is http://www.gdsofusa.com/marantec_garage_door_openers.html. When this page (and some others) is viewed in Safari 5.0 (7533.16) and probably others, the page content is off to the right.
I just need to fix this since about 15% of the traffic is Safari.
Please help!
I got it working by:
Removing "float:left" on your "tabs" div
Setting your "tabs" li's as "display:inline-block" instead of "display:inline"
HTH
The first thing to try is always validation
A common cause of this kind of problem is a mismatched end tag on an HTML element.
Try an HTML validator like http://validator.w3.org

Resources