Fixed elements inside an iframe do not display properly in Safari

Our team is encountering an issue where elements containing position: fixed; within an iframe are not rendering properly. We have observed this problem specifically on macOS in Safari.

Below is the expected appearance:

https://i.sstatic.net/ZD1VH.png

And here is a snapshot of how it appears on Safari in macOS (upon page load):

https://i.sstatic.net/f86bG.png

Upon page loading, the top and bottom bars do not display. While they exist within the DOM and can be interacted with, they remain invisible as white spaces, as depicted in the image above.

If we manually trigger a redraw using JS, CSS, or by resizing the browser window, the bars will become visible. However, our concern lies in understanding why this initial rendering glitch occurs.

You may explore a live demonstration here:

Note: This issue does not always manifest consistently. Occasionally, after resizing the browser and attempting again, the correct display may appear. We invite you to try reproducing this anomaly.

cssmacosbrowsersafariwebkit

Answer №1

It appears that there are some hiccups when using position: fixed and z-index. Certain older browsers may handle stacking contexts differently.

Through some experimentation, I was able to resolve the issue by injecting a stylesheet with the following code:

#ol-main-header,
#cl-footer {
  -webkit-transform: translateZ(0);
}

You can also consider removing the unnecessary z-index: 99999. Hopefully this solution proves helpful.

Answer №2

After testing out your suggested solution, I must say it's quite intriguing. Have you considered the possibility of a caching issue? It seems that Safari handles iframe caching in a unique manner, which could be causing the problem.

Would you mind experimenting with altering the HTTP headers for the iframe to prevent caching, like so?

Cache-Control: no-cache, no-store, must-revalidate Pragma: no-cache Expires: 0

For reference, here is a PHP example:

header('Cache-Control: no-cache, no-store, must-revalidate'); // HTTP 1.1.
header('Pragma: no-cache'); // HTTP 1.0.
header('Expires: 0'); // Proxies

Answer №3

Ensure you are writing your CSS code in the iframe file and not in your main view file.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes the text node to be visible on top of the background of the element it is overlapping with?

Consider this basic HTML structure: div { box-sizing: border-box; color: white; font-size: 28px; height: 100px; width: 200px; } #a { background: blue; padding-top: 40px; } #b { background: green; margin-top: -100px; } <div id="a" ...

htmlcss

What can I do to ensure that the cells within a CSS grid row have consistent heights across various columns?

Seeking for a solution to this issue seems futile - every response I find is about a slightly different issue, where all the rows in a single column end up being the same height as the tallest cell in that column. The suggestion is to add grid-auto-rows: 1 ...

htmlcssgrid

Sleek and versatile sidebar reaching full height

Is there a way to make my sidebar cover the full height of the screen without using position: fixed? The code I've tried doesn't seem quite right. Any tips? JSFindle: http://jsfiddle.net/Pw4FN/57/ if($(window).height() > $('#page-contai ...

cssresponsive-design

Set the clock to the correct time by winding it up

I have created a vintage-inspired clock using javascript and css. function updateClock() { var now = moment(), second = now.seconds() * 6, minute = now.minutes() * 6, hour = now.hours() % 12 / 12 * 360 + 90 + minute / 12; ...

javascriptcssmomentjs

Navigation bar with dropdown functionality that adjusts its width based on the content inside

Need help with a CSS dropdown menu issue on my WordPress site. The contents of the submenus are too wide, even after setting a static width for them. I'm looking for a way to make the submenu width adjust dynamically based on the title length. Any exp ...

cssnavigation

Checkbox and Ionic avatar image combined in a single line

I am currently working on a mobile app using the ionic framework. I would like to create a layout with an avatar image on the left, text in the middle, and a checkbox on the right. Can anyone provide guidance on how to achieve this? The code snippet below ...

htmlcsscordovaionic-framework

Can the background image of a div be cropped using CSS/JavaScript techniques?

I have a div with a background image of a world map that I need to clip at two precise points. Clipping from the left side is straightforward. In my CSS: .le-map { background-image: url('../img/le-map-of-le-world.mlg'); background-size: 100% ...

javascriptcssimage

Is there a way to center text that is aligned to the left within a div?

Is there a way to center text that is left aligned? I'm struggling to achieve the following effect: This text is left aligned. This text is left al ...

htmlcsstext-alignment

Issue with jquery curvy corners not functioning properly on Internet Explorer 8

Check out my website at If you view the page in IE8 and then in IE7 compatibility mode, you'll notice a strange issue. The box on the right disappears in IE8 but displays perfectly rounded corners in IE7. I am currently using the jQuery Curvy Corner ...

javascriptjqueryhtmlcsscurvycorners

Is it possible to alter Bulma Sass variables dynamically by referencing the class of an HTML element?

I am currently working on implementing a dark and light theme using bulma. My plan is to dynamically assign classes to elements using vue (such as .dark-theme or .light-theme) and then apply different colors based on these themes. However, I am facing an i ...

csssassbulma

Is there a way to display the background image behind the input text on an HTML page?

I am currently working on programming a website using HTML forms. I am facing an issue where I need to display a background image behind the input text, such as in a search bar. However, when I set the background image, the input text appears white and t ...

htmlcss

Using JavaScript on an iPhone to automatically launch Safari when clicking on a link from a non-default iOS

When "googlechrome://www.lego.com" is opened in mobile Safari, it switches to the Google Chrome iOS app to open the URL. This feature allows for scriptlets like the following one, which enables you to open the current page in the Google Chrome iOS app from ...

javascriptiossafari

New and improved Bootstrap 5 menu bar

I am seeking to customize my navigation bar by adding a black background that spans its entire length. I do not want to rearrange the links or logo; just apply a background color. Another issue arises during SASS compilation: I am trying to change the col ...

htmlcssnavbarbootstrap-5

What are the steps to create a dynamic navigation menu in Angular 2?

I have successfully implemented this design using vanilla CSS and JS, but I am encountering challenges when trying to replicate it in Angular 2. Setting aside routing concerns, here is the current state of my component: navbar.component.ts import { Comp ...

cssangulartypescript

Sometimes, the page-wide background in Internet Explorer doesn't load properly

Currently, I am working on a website that uses an image as the background for the entire site. Everything seems to be running smoothly in Firefox and Safari, but Internet Explorer is giving me some trouble. Sometimes the image fails to load at all, other t ...

htmlcss

How can I bring the toolbar to the forefront of the page in an Angular/HTML environment?

I am currently facing an issue with bringing the toolbar to the forefront of the page. When I scroll down, the elements on the page end up covering the toolbar which is not the desired behavior. Below is the CSS code for the toolbar: .maintoolbar.mat-tool ...

htmlcssangularangular-material

What's the HTML counterpart to a CSS style sheet?

Is there a way to include a navigation div in all HTML documents without having to repeat it in each one? I'm looking for a solution that doesn't involve adding the entire div to every document, similar to how CSS stylesheets work. I am unaware ...

htmlcss

I encountered a SyntaxError indicating a missing ")" right before utilizing jQuery in my code

When trying to run the code below, I encountered an error in the console stating SyntaxError: missing ) after argument list. $(document).ready(function() { $(".blog-sidebar-form form").before("<p class="blog-sidebar-inform>Dummy Text</ ...

jqueryhtmlcss

Tips on dividing a CSS file into separate lines for improved readability

I came across a dilemma while working with a 3rd party CSS file that is all one long line. Both the Sublime 2 text editor and Eclipse CSS editor were unable to split the file into easily readable style blocks. Can anyone recommend tools or methods for bre ...

csstext-editor

The margin property is set to zero but the div element still maintains some spacing

How can I create a div with no margin for a header that spans across the page? Here is what I have tried: <!DOCTYPE html> <html> <head> <title></title> <style> .test { height: 100 ...

htmlcsslayoutmargin