Safari displays overlapping elements when using media query

TheGrayVacuum

Problem: Safari displays overlapping elements in CSS media query styling.

On Chrome and Firefox, everything displays properly. Here's a screenshot:

enter image description here

However, when I test on Safari desktop ( Safari 8.0, with browser width adjusted to mobile size) and on an actual mobile device (iphone 6.0 / iOS 8.3 / safari browser) -- article is getting overlapped by aside, which is overlapped by footer.

enter image description here

I have found an undesirable workaround -- by setting the min-height in the media query styling to something like 600px (for example). This will position the content so it would look ok on mobile device.

Since this is not a one-page website, I need the css to do this for me automatically, without me having to figure out the correct min-height on every page.

I'm new at this, so if you can please provide actual code, that will be most helpful. Your help is appreciated.

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

#main {
border: 5px solid purple;
width:80%;
min-height:500px;
display: -webkit-flex;
display:         flex;
-webkit-flex-flow: row;
        flex-flow: row;
}

#main > article {
    min-width:400px;
      border: 5px solid green;
    -webkit-flex: 60%;
            flex: 60%;
}

#main > footer {
      border: 5px solid yellow;
}

/* Too narrow to support two columns */
@media all and (max-width: 640px) {

    #main {
    width:100%;
    -webkit-flex-flow: column;
          flex-direction: column;
    }

    #main > article {
    min-height:320px;
    }

    #main > aside {
    min-height:200px;
    }
}
</style>

<div id="container">
    <center>
    <div id="main">
      <article> 
      <div style="background-color:linen;width:100%;height:500px" id="div1"> 
        <div style="background-color:red;width:386px;height:386px"> 
        <p>article</p>
        </div>
      </div>
      </article>

      <aside style="border:5px solid black">
      <center>
      <div style="background-color:orange;width:300px;height:300px" id="div2">
      <p>aside</p>
      </div>
      </center>
      </aside>
    </div> 
    </center>

    <footer>
    <div style="background-color:green;width:100%;height:50px" id="div3">
    <p>footer</p>
    </div>
    </footer>
</div>
Michael Benjamin

Okay, I think I solved your problem.

I tested this solution in Safari on my iPad and it works.

The source of the problem is the HTML5 <article> tag.

Although article appears to be supported by all major browsers, Chrome and Firefox apply one behavior to this element, and Safari applies a different behavior (at least in this case). I haven't delved deep into the spec to know which behavior adheres more closely to the standard, so I can't tell you which rendering is correct.

But bottom line:

Replace the <article> tags with simple <div> tags. That will keep your layout intact in Safari.

I also tested the HTML5 aside and footer elements in your code and didn't notice any problems. Although if you hit any snags in the future that may be a good place to start troubleshooting.


Lastly, as a side note, you may want to consider finding a replacement for the HTML <center> tag. This tag has been deprecated and is currently in the process of being dropped by the browsers.

There are many other ways to center elements in a way that adheres to best practices. I recently wrote an answer that covers this topic: How to Center Elements Within a Div

Hope this helps. Good luck!

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Safari and media query for mobile

From Dev

Overlapping results on mysql query when using limit/offset

From Dev

Is it common to call media queries to restructure elements manually when using Bootstrap

From Dev

Font-size Quirk when Landscape rotates to Portrait - CSS Media Query - iPhone5 Safari

From Dev

CSS media query not changing elements?

From Dev

How to set media query for safari web browser

From Dev

Media query using jquery

From Dev

Responsiveness using Media Query

From Dev

css media query not working for Iphone (Chrome and Safari) / Apple MBP Safari

From Dev

Text is overlapping on each page (CSS @media query print)

From Dev

li elements overlapping when resizing browser window

From Dev

Media Query Triggering when it should not?

From Dev

using device width in media query

From Dev

Safari Responsive Design Mode CSS media query 'device' not applied

From Dev

OSX Safari applying media query 15 pixels early

From Dev

Safari Inspector CSS Media Query Selectors Show as [object Object]

From Dev

Safari Responsive Design Mode CSS media query 'device' not applied

From Dev

responsive navbar using display:none still shows even it is meant to show when the screen resized using media query

From Dev

Safari display flex not working when elements are 25%

From Dev

Safari image overlapping issue

From Dev

Redirect page displays blank when using $_POST

From Java

media query doesn't work properly with css modules when using an arbitrary class name

From Dev

Mediawiki media query wont take effect on browser resize when using firefox and IE

From Dev

Using Selenium to determine the visibility of elements for Print media

From Dev

Get media elements from RSS using SyndicationFeed

From Dev

Bootstrap navbar overlapping content when using affix

From Dev

Status bar overlapping when using ECSlidingViewController

From Dev

HTML inputs overlapping when using absolute positioning

From Dev

One div is overlapping another when using polymer

Related Related

  1. 1

    Safari and media query for mobile

  2. 2

    Overlapping results on mysql query when using limit/offset

  3. 3

    Is it common to call media queries to restructure elements manually when using Bootstrap

  4. 4

    Font-size Quirk when Landscape rotates to Portrait - CSS Media Query - iPhone5 Safari

  5. 5

    CSS media query not changing elements?

  6. 6

    How to set media query for safari web browser

  7. 7

    Media query using jquery

  8. 8

    Responsiveness using Media Query

  9. 9

    css media query not working for Iphone (Chrome and Safari) / Apple MBP Safari

  10. 10

    Text is overlapping on each page (CSS @media query print)

  11. 11

    li elements overlapping when resizing browser window

  12. 12

    Media Query Triggering when it should not?

  13. 13

    using device width in media query

  14. 14

    Safari Responsive Design Mode CSS media query 'device' not applied

  15. 15

    OSX Safari applying media query 15 pixels early

  16. 16

    Safari Inspector CSS Media Query Selectors Show as [object Object]

  17. 17

    Safari Responsive Design Mode CSS media query 'device' not applied

  18. 18

    responsive navbar using display:none still shows even it is meant to show when the screen resized using media query

  19. 19

    Safari display flex not working when elements are 25%

  20. 20

    Safari image overlapping issue

  21. 21

    Redirect page displays blank when using $_POST

  22. 22

    media query doesn't work properly with css modules when using an arbitrary class name

  23. 23

    Mediawiki media query wont take effect on browser resize when using firefox and IE

  24. 24

    Using Selenium to determine the visibility of elements for Print media

  25. 25

    Get media elements from RSS using SyndicationFeed

  26. 26

    Bootstrap navbar overlapping content when using affix

  27. 27

    Status bar overlapping when using ECSlidingViewController

  28. 28

    HTML inputs overlapping when using absolute positioning

  29. 29

    One div is overlapping another when using polymer

HotTag

Archive