The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › CSS › Safari 5 CSS Transform Render Bug?
- This topic is empty.
- Author Posts
I added a little CSS Transform Scale to the website: http://www.canadaturismo.com.br – it just scale up the social icons at the right top of the page. But when you rollover it using Safari on Mac, almost all the text blinks. It is working fine with FF Mac and PC, Chrome Mac and PC and IE 9.
Only with Safari I am having this bug. I tried to search internet for this error but couldn’t find. So I don’t know if I missed something or it’s a real bug.
Here is the session of the code:
- Veja nossos videos no Youtube.
- Siga-nos no Twitter.
- Curta nossa página no facebook.
P.S. I already tried -webkit-backface-visibility: hidden; – but it blinks 1 time and change the font rendering.
I have exactly the same problem on this site: http://www.douglasdentistryfl.com/dentist-lutz-fl.php . The sidebar text blinks when the slideshow transitions between the slides (in Safari). Have you found the solution?
- The forum ‘CSS’ is closed to new topics and replies.
Safari IOS 16.0, css scale property bug
Working on my website, I was using new shorthand property named scale .
When using this scale property on a div to scale: 20; my images disappears (behind?) until scale transition ends. Works fine on Chrome.
When using transform: scale(20) everything works fine.
Link: https://drive.google.com/drive/folders/1HB13sujiXKI9xsm3h8g8dlaw0bFsIYrr?usp=sharing
Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.
Safari does not render <foreignObject /> in <SVG /> in <HTML /> correctly
This is a bug report on Safari Version 16.3 (17614.4.6.11.6, 17614) on macOS 12.6.3 (21G419) as well as Safari on iOS 16.3 (tested on an iPhone).
- The attributes x, y of foreignObject are ignored, putting the top-left of the foreignObject at the top-left of the SVG box.
- The attribute transform of foreignObject is ignored; it is not possible to translate or scale the foreignObject.
- The content of the foreignObject is always rendered in the front of all the child elements of the <SVG />, while according to the spec an element (e.g. <circle />) that is specified further down in the list of the childs must be rendered in front the childs that come first, even if that is a foreignObject.
These specifications are applicable in both SVG and SVG2. Please align Safari with the standard specification:
- https://www.w3.org/TR/SVG/embedded.html
- https://www.w3.org/TR/SVG2/embedded.html
Posted on Mar 2, 2023 12:25 AM
Posted on Mar 3, 2023 1:51 PM
daenenk wrote:
• This is a bug report on Safari Version 16.3 ...
Ok, but this is not the place to file a bug report. Apple will not see it here.
Similar questions
- Not getting "show address bar" on ipad OS 15 Safari Hi, somehow my address bar in Safari moved from the bottom back to the top in the new iPad OS 15. I want it back on the bottom because I keep hitting those three dots they added to the top now. I press the aA option menu but it doesn’t show the “Show Address Bar” option. Anyone else having this issue and/or know how to fix? Thanks! 1107 2
- safari Unable to view partially transmitted html on iOS safari whereas it works fine on MAC safari.Any known issue or any fix that I can try? 507 8
- Safari 16.3 IFrame Depth Limit? Heyas I have a webpage with a few iFrames within iFrames After a certain "depth" Safari no longer renders the iFrames even though developer tools can still find the children of the iFrames. Works fine in Windows 11 with latest Edge and latest Chrome. I tested this on a brand new Mac Mini M2 with latest OS and latest Safari. Can anyone confirm that there is a "depth" limit to Safari 16.3 and any documentation so I can have this annotated on the history logs. 700 2
Loading page content
Page content loaded
Mar 3, 2023 1:51 PM in response to daenenk
WebKit Features in Safari 16.5
May 18, 2023
by Jen Simmons
Today we are pleased to share what new’s in WebKit for Safari 16.5.
After the massive, web-developer-feature-packed release of Safari 16.4 , this version focuses predominately on polishing existing features and fixing bugs. Safari 16.5 does contain a handful of new features including CSS Nesting, :user-valid and :user-invalid , support for pre-orders and deferred payments with Apple Pay, and an update to Lockdown Mode.
CSS Nesting
Safari 16.5 includes support for CSS Nesting. A long-time favorite feature of pre-processors, nesting allows web developers to write code like this:
Learn all about CSS Nesting — including the current limitation that prevents the use of an element selector (like article ) without including a symbol (like & ) before the element — in Try out CSS Nesting today .
The CSS Working Group is currently working on a very promising idea for removing the requirement that every nested selector begin with a symbol. Hopefully sometime in the future, that limitation will no longer exist.
CSS user valid and invalid pseudo-classes
The pseudo-classes :user-valid and :user-invalid are now supported in Safari 16.5.
For years, :valid and :invalid could be used to target an input field or other form field based on whether it is in a valid or invalid state. But there’s been one problem — as soon as a user starts typing, the content is evaluated and declared invalid if it doesn’t match. For example, an email address is marked :invalid as the first half is typed, before the @ is present. This has led to developers using JavaScript for this use case instead.
The new :user-invalid and :user-valid pseudo-classes are much smarter about when they are triggered, removing the need for JS. Compare :invalid to :user-invalid in a browser with support to see the difference.
These new pseudo-classes are especially helpful when combined with :has() to provide powerful tools for styling anything on the page, like the label of a form field.
Apple Pay on the web now supports pre-orders and deferred payments.
Lockdown mode
Lockdown mode now disables WebCodecs API .
Lockdown mode is an optional, extreme protection that’s designed for the very few individuals who, because of who they are or what they do, might be personally targeted by some of the most sophisticated digital threats. Most people are never targeted by attacks of this nature.
WebKit for Safari 16.5 provides multiple bug fixes and feature polish.
- Fixed Scroll to Text Fragment sometimes scrolling to the top after reloading the page.
- Fixed support for x resolution unit in calc() .
- Fixed reflecting trimmed block-start , block-end , inline-start , and inline-end margins for grid or flex items in computed styles.
- Fixed the top offset of self collapsing children at the end of a block container with block-end margin trim.
- Fixed triggering layout when changing margin-trim value.
- Fixed increasing column-count above 2 not updating the layout.
- Fixed CSS custom properties not applying to an SVG use element’s shadow tree.
- Fixed new CSS property unexpectedly dropped from an empty CSS rule when tabbing through or editing a selector.
- Made -webkit-image-set() an alias of image-set() .
Editing & Forms
- Fixed hairline on the selection of bidi text.
- Fixed photo library picker showing videos for accept="image/*" .
- Updated digital display in Intl.DurationFormat to match spec changes.
- Fixed text wrapping for bidi text when line-breaking.
- Fixed non-audible AudioContext preventing the audio session to change from play-and-record after stopping capture.
- Fixed handling video streams containing a CodecDelay value that caused an audible pop at the beginning of video playback.
- Fixed video freezing in a video conference when removing AirPods Pro during the call.
- Fixed snapping to the last snap position when performing layout when scroll snapping occurs with a physical mouse wheel.
- Fixed pinch-to-zoom when toggling on and off scroll snapping.
- Fixed scroll snapping jumping to the previous page when swiping to the next page.
- Fixed scroll snapping to work with a physical scroll wheel on a mouse.
- Fixed form controls rendering.
- Fixed visual updates for content: counter() when position: absolute is set.
- Fixed an unexpected visible first frame of a transform animation when !important style overrides the animated value.
- Fixed filling metadata headers for preflight requests.
- Fixed OffscreenCanvas WebGL to fire the context lost event.
- Fixed getFileHandle() to return a TypeMismatchError on unexpected entry type.
- Fixed “Untitled” label on the back to previous app button when opening a web app via a link.
Web Assembly
- Fixed WASM SIMD breaking WebP decoding applications.
Web Inspector
- Added initial support for color-mix CSS values.
- Fixed element ::backdrop rules showing up without a backdrop.
- Fixed “Selected element” console entry filling an entire row.
- Fixed an issue causing the mini console to always opens when choosing “Inspect Element”, even if it was previously closed.
We love hearing from you. Send a tweet to @webkit to share your thoughts on Safari 16.5. Find us on Mastodon at @[email protected] and @[email protected] . If you run into any issues, we welcome your feedback on Safari UI, or your WebKit bug report about web technologies or Web Inspector. Filing issues really does make a difference.
Download the latest Safari Technology Preview to stay at the forefront of the web platform and to use the latest Web Inspector features. You can also read the Safari 16.5 release notes .
Updating to Safari 16.5
Safari 16.5 is available for macOS Ventura , macOS Monterey, macOS Big Sur, iPadOS 16 , and iOS 16 . Update to Safari 16.5 on macOS Monterey or macOS Big Sur by going to System Preferences → Software Update → More info, and choosing to update Safari. Or update on macOS Ventura, iOS or iPadOS, by going to Settings → General → Software Update.
Fix SVG CSS animation issue in Safari
Safari 16 has trouble with CSS animations on SVG child elements, but you can resolve them by using a combined transform property.
Setup: You have an SVG that needs separate animations for its path and rect elements. Applying a single transform to the elements works, but combining multiple transforms results in nondeterministic animation bugs:
The fix: You can fix this by combining your transformations into multiple functions on a single transform property:
Try it out:
See the Pen Safari CSS animation SVG bug by Sean McPherson ( @SeanMcP ) on CodePen .
Takeaway: Individual properties for CSS transforms are nice, but they can cause issues with SVG animations in Safari. The safer option seems to be sticking with a single transform property for now.
- https://stackoverflow.com/a/72022385/8486161
- https://developer.mozilla.org/en-US/docs/Web/CSS/transform
3D Transform Flicker Bug in Safari?
I’m seeing a flicker in my 3D transform animation that is triggered by scrolling in and out of the lower section on the following page.
http://3d-transform-bug.webflow.io/
Basically there are four icons that rotate around 360° as they load similar to the “Card Flip Interaction” shown here on Webflow’s own 3D Transform demo page, in example 3 http://3d-transforms.webflow.com/ . The icons are comprised of an image and a flipcard back div. These work fine in Chrome and Firefox, but in Safari the images stay behind the back div until the rotation stops and then they “pop” in front.
Share link: https://preview.webflow.com/preview/3d-transform-bug?preview=145d97e042c5510a6c75343d2ed792ec
Is this a Safari bug?
(bump) This post needs a (/bump)
Hi @JFly , could you try pasting this into the Head of your site in custom code:
Save changes and republish, and see if the issue still occurs? I hope this helps.
Thanks @cyberdave , I added the code as you said but it didn’t seem to fix it.
(bump) sorry for the second (/bump)
@cyberdave Thank you for the fix–is this something the Webflow team is considering implementing automatically as a permanent fix for the issue?
Okay - well, I basically ended up rebuilding this animation to diagnose what was going on…
Looks like I was using an image for the front of the flipcard element and ended up putting that in a div with a background fill to match the shape or the flipcard back element. Also, It seems that I may have not been hiding backfaces properly. So, it’s a little different than what I started with but it works for now.
Thanks @cyberdave for the help though!
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
Search code, repositories, users, issues, pull requests...
Provide feedback.
We read every piece of feedback, and take your input very seriously.
Saved searches
Use saved searches to filter your results more quickly.
To see all available qualifiers, see our documentation .
- Notifications
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Safari + foreignobject render issue [SOLVED] #284
ankero commented Mar 8, 2020
- 👍 15 reactions
- ❤️ 6 reactions
edo commented Mar 14, 2020
Sorry, something went wrong.
bkrem commented Mar 15, 2020 • edited
hiep294 commented Oct 16, 2022 • edited
Damon99999 commented Nov 4, 2022
remon25 commented Nov 26, 2023
No branches or pull requests
Watch CBS News
Hyper-sexual "zombie cicadas" that are infected with sexually transmitted fungus expected to emerge this year
By Caitlin O'Kane
April 5, 2024 / 12:44 PM EDT / CBS News
Trillions of cicadas will emerge across several U.S. states this spring in an event one expert dubbed "cicada-geddon." Not only are more cicadas than usual expected this year, but some of them will be "zombie cicadas" that are infected by a sexually transmitted fungus that makes them hyper-sexual.
Periodical cicadas spend most of their lives underground and only emerge after 13 or 17 years. This year, two broods of cicadas will emerge: Brood XIX , which comes out every 13 years, will emerge in the Georgia and Southeast, and Brood XIII , which emerges every 17 years, will appear in Illinois .
With this convergence, the bugs will arrive in numbers that have not been seen in generations .
Matthew Kasson, an associate professor of Mycology and Forest Pathology at West Virginia University, says both of these broods can be infected by a fungal pathogen called Massospora cicadina .
Once the cicadas emerge from the ground, they molt into adults, and within a week to 10 days, the fungus causes the backside of their abdomens open up. A chalky, white plug erupts out, taking over their bodies and making their genitals fall off.
"The cicada continues to participate in normal activities, like it would if it was healthy," Kasson told CBS News. "Like it tries to mate, it flies around, it walks on plants. Yet, a third of its body has been replaced by fungus. That's really kind of bizarre."
Kasson said the reason the cicadas might be able to ignore the fungus is that it produces an amphetamine, which could give them stamina.
"But there's also something else unusual about it," he said. "There's this hyper-sexualized behavior. So, males for example, they'll continue to try and mate with females — unsuccessfully, because again, their back end is a fungus. But they'll also pretend to be females to get males to come to them. And that doubles the number of cicadas that an infected individual comes in contact with."
Usually, male cicadas will let out a loud humming sound to attracted female cicadas and the female will flick her wings to signal she wants to mate. But the fungus has males flicking their wings like females to attract males and in turn, infect them, Kasson says.
"In that way, the fungus is sexually transmissible. So, it spreads like an STD," he said.
Kasson said where the fungus originates is still unclear. "A lot of this is still unclear because there's a lot that happens below our feet," he said.
Massospora cicadin a produces spores on the cicadas and it is suspected that when the cicadas die, the spores get into the soil and infect other cicadas underground.
"In the month leading up to them emerging all together in a spectacular fashion, they're waiting there, sub-surface, for the soil to reach 64 degrees," Kasson said. It's suspected the cicadas are infected when they are waiting underground, or when they are born and dig themselves into the soil, coming in contact with the fungus spores.
Fungus usually needs a host, like an insect, to carry the spores and spread the infection. Then, it kills the host.
It's suspected the Massospora cicadina fungus lays dormant for years and then begins to become a "puppet master" when the cicadas reach adulthood, Kasson said. "Because this is such a bizarre life cycle for an insect, the fungus has had to change its strategy. So, it basically keeps the host alive long enough to maximize dispersal," he said.
It is unclear how the fungus would affect other wildlife or humans, but Kasson said in his research, he's observed thousands of compounds in infected cicadas and some could be toxic.
"We know that a lot of animals are gobbling these cicadas up as they're emerging — snakes and birds. Is it possible they're having an effect on the animals that eat them? Yes, it is possible." But, he said, less than 5% of cicadas are infected with the fungus and researchers have yet to observe any impact on other wildlife.
Kasson urges people not to eat the cicadas or kill them, but to take photos if they see the fugus on the bugs and share them with online science communities, like iNaturalist, to help researchers.
Caitlin O'Kane is a New York City journalist who works on the CBS News social media team as a senior manager of content and production. She writes about a variety of topics and produces "The Uplift," CBS News' streaming show that focuses on good news.
More from CBS News
When is the next total solar eclipse in the U.S.?
Massive Ukrainian effort underway to clear millions of landmines
How to get a lower mortgage rate this spring
What is Eid al-Fitr? 6 questions about the holiday, answered
IMAGES
VIDEO
COMMENTS
Here is what works for me on all tested browsers and mobile devices (Chrome, IE, Firefox, Safari, iPad, iphone 5 and 6, Android). The key for safari (including ios devices) is to add the other transform css rules and not just: transform: translateY(-50%); You need to add to it this group of rules: -ms-transform: translateY(-50%);
I believe that transform in Safari is broken. In my case, I start a drag & drop operation on a transformed element - and the ghost image is truncated as if it was using the rectangle BEFORE the transform, and the ghost image is clipped incorrectly. It's very consistent. If I transformX(-50%) - exactly half the ghost image is visible.
October 16, 2014 at 7:43 am #186388. Matt Fletcher. Participant. I am trying to move a search box widget on a WordPress page by using translate (since it be put there by default). The code below works on all of the major browsers except Safari both the desktop and mobile versions. The code is below: input#s {. -ms-transform: translateY (85px);
Since the Safari update to 15.4.1, our platform with various CSS transitions, transforms and animations has major rendering problems. Various elements (images/text/areas) are loaded multiple times and flicker very ugly. The same elements placed on another side of the platform don't have the problem. There seems to be some layers conflict and ...
CSS Transition Bug In Mobile Safari. Fuck Safari so much. I hate that devilspawn of a browser. My Safari (iOs 15.4.1) has troubles displaying CSS transitions with transform and opacity when different transition times are given for the two, like transition: opacity 400ms, transform 600ms. Just wanted to let you know, in case you encounter a ...
The WebKit blog details how to use individual CSS Transform properties in the latest version of Safari Technology Preview. This brings the browser in line with the CSS Transforms Module Level 2 spec, which breaks out the translate(), rotate() and scale() functions from the transform property into their own individual properties: translate, scale, and rotate.
element. style. transitionProperty = "transform"; element. style. transitionDuration = "1s"; element. style. transform = "translateX ... If you find your animations running differently in Safari, please file a bug report on bugs.webkit.org so that we can diagnose the issue and establish if it is an intentional change in behavior or a regression ...
Now with Safari 14.1, these fields are supported on macOS as well. CSS Individual Transform Properties. With WebKit support of Individual Transform Properties, web developers can write CSS rules and keyframe animations in a more straightforward way. For years, the transform property has provided the ability to scale, rotate, and translate. You ...
A transform can cause part of an element to be displayed in the element's overflow area. If the value of the overflow property is scroll or auto, scroll bars appear as needed if a transform renders part of an object outside the display area. Safari supports both 2D and 3D transforms. Both 2D and 3D transforms are W3C drafts.
Safari: Hi all, Can anyone explain why my 3d transform effect works fine on chrome/FF but has ppixellated all the pure css divs and text when viewed on safari. Without the 3d transform it looks normal in safari. The odd thing is i built this exactly the same i another site which works fine in safari. The only difference is the blocks on this ...
Home › Forums › CSS › Safari 5 CSS Transform Render Bug? This topic is empty. Viewing 2 posts - 1 through 2 (of 2 total) Author. Posts. November 7, 2011 at 6:18 am #35078. sgobin. ... The sidebar text blinks when the slideshow transitions between the slides (in Safari). Have you found the solution? Author. Posts. Viewing 2 posts - 1 ...
Safari IOS 16.0, css scale property bug. Hi there, Working on my website, I was using new shorthand property named scale. When using this scale property on a div to scale: 20; my images disappears (behind?) until scale transition ends. Works fine on Chrome.
This is a bug report on Safari Version 16.3 (17614.4.6.11.6, 17614) on macOS 12.6.3 (21G419) as well as Safari on iOS 16.3 (tested on an iPhone). The attributes x, y of foreignObject are ignored, putting the top-left of the foreignObject at the top-left of the SVG box. The attribute transform of foreignObject is ignored; it is not possible to ...
After the massive, web-developer-feature-packed release of Safari 16.4, this version focuses predominately on polishing existing features and fixing bugs. Safari 16.5 does contain a handful of new features including CSS Nesting, :user-valid and :user-invalid, support for pre-orders and deferred payments with Apple Pay, and an update to Lockdown ...
Mar 10, 2023 Fix SVG CSS animation issue in Safari. Safari 16 has trouble with CSS animations on SVG child elements, but you can resolve them by using a combined transform property.. Setup: You have an SVG that needs separate animations for its path and rect elements. Applying a single transform to the elements works, but combining multiple transforms results in nondeterministic animation bugs:
Hi @JFly, could you try pasting this into the Head of your site in custom code: <style> body { -webkit-font-smoothing: antialiased; } </style> Save changes and republish, and see if the issue still occurs? I hope this helps.
We faced an issue, where the node content was rendered to coordinates 0,0 (top-left corner) of the parent SVG. This is due to a bug in Safari, which affects foreignobjects to calculate the rendering position based on the top SVG and not the foreignobject itself.
Animating Transform Origin with CSS for SVG (Mobile Safari) This was a weird one to hunt down, that I couldn't find a solution to until I noticed it happening in Firefox as well.
On the "back" side element that is translated 180 deg in Y, I added a 1px Z translation and it fixed my Safari bug. transform: rotateY(180deg) translateZ(1px); If the front & back elements are in the same z-index in Safari, this bug seems to be present. There is a CodePen here where you can remove then translateZ(1px) and watch the bug show up ...
Kasson urges people not to eat the cicadas or kill them, but to take photos if they see the fugus on the bugs and share them with online science communities, like iNaturalist, to help researchers ...
z-index: 4. left: 85%. transform: translateY(50%) translateX(-50%) opacity: .7. img. width: 200px. I tried to use translate3D(50%, 50%, 0) instead of translateY(50%) translateX(-50%). Looks like the same bug as here, however, in your case it might be harder to replace these relative values with absolute ones...