Safari-specific:
I have got a page which is simply a background with an iframe centered in it. The iframe uses transform animations on :hover, and these cause the iframe content to make a little unwanted 1-pixel shift to the left only in Safari (tested in Chrome & Firefox).
I'm not sure what might be causing Safari to do this.
My iframe is width: 100%, so presumably the frame itself isn't
shifting, only the content.
The shift only lasts for the duration of the animation, not the hover.
The shift doesn't occur on the page that is the source of the iframe content, only once it is displayedcwithin the iframe.
Has anyone encountered this issue in Safari?
Page with Safari issue: http://www.bladesnpc.com/index-02.html
Content within iframe: https://perchance.org/blades-npc
I am managing the element centering with flex. Changing the flex-direction to column solved the Safari problem—although this particular fix only works because I am centering a single element on the page.
Related
I've got shadow scrollable elements whose scrolling is linked to the scroll offsets of other elements: https://henrybuilt.github.io/react-sticky-table/
For some reason, I can't get them to appear in Safari on OSX when scrollbars are set to always show. Modifying the z-index after page-load using the dev controls appears to affect them, but not consistently. The scrollbars render just fine in other browsers.
What is causing this rendering issue and how can I fix it?
I've been unable to solve stuttering in Chrome/Opera when using transitions - e.g. opacity, transform, filter etc.
For simplicity, I will focus on opacity.
Live example here:
http://www.lydkontoret.dk/index.php?pgId=20&pgName=Lyd+%26+lys
When you click on one of the pictures below the banner, a large version is displayed. I do this by adding a fullscreen div on top of page to prevent access to page elements. The div is faded in via transition on opacity. On top of this div is added further divs that holds the image.
Notice the opacity transition for the fullscreen element when clicking on a picture. On a 24" monitor with browser window maximized, chrome/opera stutters like crazy, while firefox/msie/msedge is reasonably smooth.
To complicate matters, Chrome/Opera performs ok when browser window is smaller - as rendering engine apparently is able to cope.
I've tried using will-change and translateZ(0) on the various elements involved, but chrome just doesn't care (removing the banner helps a lot - as expected, because the rendering engine then has less to deal with).
Also it's mostly the fade in that stutters. When closing the image display, transition on fullscreen element back to fully transparent often looks acceptable.
I figure my coding is ok, as Firefox etc. do the various transitions nicely. So why the problem with the blink engine used by chrome and opera?
Any thoughts??
I have a slideshow on my homepage that scales to 100% width. It works perfectly on my computer (I can even resize my browser windows all the way down, in both Firefox and Safari, and it works great) but it doesn't work on my iphone (it stays too wide and adds a lot of blank space to the right of the page content).
The slideshow is an iframe. I've tried scaling the iframe with html, putting it in a div and scaling the div with css, and I've tried this: http://css-tricks.com/snippets/html/responsive-meta-tag/, but nothing seems to be working. Does anyone have any ideas I can try?
Thanks!!
website: www.silvervinedesign.com
You have pixel widths defined for the styles of this element. Therefore, it won't be responsive.
If you inspect the source of this iframe (right click and choose "Inspect Element"), you'll find that the <ul> element containing the images is getting a style="width: 4778px;" applied to it. Each <li> child is also getting an explicit pixel width style applied. When I view the source of the iframe, these style tags are not present there.
That tells me you've got some javascript function which is setting this width. Looking at your source, I'm guessing the plugin responsible is galleria, but it's hard to tell.
I'm trying to add a CSS slant to <section> elements on my page, which also serve as backgrounds for a "parallax" scrolling effect.
I'm encountering an interesting problem. The slant works on the first <section>, but on the second (or any after that), the background image is moved down, or the flow of the div gets messed up. I'm not sure why this is happening.
I've made a jsfiddle of the problem. Any ideas?
If you open the fiddle in Safari, that's the behavior I'm expecting.
Update: It actually has nothing to do with the parallax scrolling. It's just the combination of background-attachment: fixed and slant.
I have a calendar that is a table. For some reason, IE is adding a vertical scrollbar to the edge of the page but there is no scroller (and nothing to scroll) FF and Safari look fine.
Any idea?
This is normal in Internet Explorer, and to my knowledge can not be turned off except maybe with a overflow:hidden on the body or html element, with the obvious downside that the page then can't be scrolled at all.
If you need to get the exact same behaviour in all browsers, and want to add the deactivated scrollbar to FF and Safari, check my recent question.
If you put overflow: auto in the body element and just remove overflow:auto or any other overflow setting in the other elements on the page, then the main browser scrollbar will allow scrolling down the page and the page will expand, moving the footer down as well.