Material-design-lite: resize window needed for display tile

Created on 17 May 2016 · 14Comments · Source: google/material-design-lite

I have an issue which occurs only on safari (my Version 9.0.1 (10601.2.7.2))

I use a grid with tiles. When I scroll down, the text elements in the tiles are not loaded immediately. I have to resize the window. The all text appears. In chrome and firefox, it works.

I found out, that the problem is based on .mdl-shadow--6dp. Removing that definition, the problem disappears. But I want to have the shadow :-)

I created a codepen:
https://codepen.io/spf/pen/jqomrd

does not work (text below map does not appear):
bildschirmfoto 2016-05-17 um 10 07 34

works (text appears immediately):
bildschirmfoto 2016-05-17 um 10 10 19

If it is not an issue, perhaps you can give me a hint, what to change in my css...

I hope I gave enough information. If you need more please tell me.
There is a lot of html and css which is not relevant in the code pen I hope this is ok.

Thanks for your great work. I like mdl very much.

Shadows Upstream Issue

Source

SabineMa

Most helpful comment

I was able to fix it in my application:

The structure of my page is as follows:
"mdlLayout->mdlLayoutContent->mdlGrid->mdlCell/mdlCard->mdlAnchor+mdlMenu"

I changed overflow: hidden to overflow: visible in the mdlCard css definition.

I think it is a bug in safari but for me the workaround is ok.

SabineMa on 24 May 2016

👍4

All 14 comments

If it is only happening in Safari then it seems like a bug in Safari's rendering engine. Not sure if there is anything we can feasibly do here to work-around the issue.

Seems best we try to find a minimal reproduction case for the WebKit engineers to look at and see if they can fix the problem.

Have you tried the example in the Safari Tech Preview to see if the problem persists? It may already be fixed in newer builds.

Garbee on 17 May 2016

Hi Garbee,
thank you for answering.
I tried with the safari tech preview and the problem remains.

I created a new, reduced codepen with all my stuff removed. Now it is only mdl.

https://codepen.io/spf/pen/xVNJKL

The problem remains: Those tiles which are above the fold are shown immediately. The others which should appear after scrolling, do only show after mouse over or window resize.

Perhaps I do something wrong? Your help would be very useful for me.

SabineMa on 18 May 2016

Which doctype are you using in your application? I'm noticing some very old syntax for getting things done that hasn't been necessary in years. From the looks of it you aren't using HTML5 which might be the source of the issue.

Please verify you are using <!doctype html> for the document type.

Garbee on 18 May 2016

I use for the document type. If you want to enter it in codepen, it tells you "You don't need a DOCTYPE on CodePen. Just put here what you would normally put in the ."

Which things do you mean? I want to correct them. Do they play a role for my problem?

SabineMa on 18 May 2016

They don't cause problems, like your meta charset declaration. <meta charset="utf-8"> is all that is needed for instance. Your elongated forms aren't problematic, just useless. It is a good indicator normally that when that is in use (and some other older tag forms) that people aren't using the latest document type.

I know codepen automatically does that, just checking again that you were using the right one. I can't run the test myself since I don't have access to Safari (Mac-only.)

There is nothing that can be done internally here unless we can pin-point the issue and implement a work-around to the bug that doesn't affect other browsers. The exact cause needs to be found, minimized, and provided to the webkit team in their issue tracker to be worked on.

Garbee on 18 May 2016

Hi Jonathan,
thank you for your explanation. I unterstand. I will try to find the exact
point/bug and them come back to you.
Regards and thank you for your great work.
Sabine

Am Mittwoch, 18. Mai 2016 schrieb Jonathan Garbee :

They don't cause problems, like your meta charset declaration. charset="utf-8"> is all that is needed for instance. Your elongated forms
aren't problematic, just useless. It is a good indicator normally that when
that is in use (and some other older tag forms) that people aren't using
the latest document type.

I know codepen automatically does that, just checking again that you were
using the right one. I can't run the test myself since I don't have access
to Safari (Mac-only.)

There is nothing that can be done internally here unless we can pin-point
the issue and implement a work-around to the bug that doesn't affect other
browsers. The exact cause needs to be found, minimized, and provided to the
webkit team in their issue tracker to be worked on.

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
https://github.com/google/material-design-lite/issues/4354#issuecomment-220089035

SabineMa on 18 May 2016

I was able to fix it in my application:

The structure of my page is as follows:
"mdlLayout->mdlLayoutContent->mdlGrid->mdlCell/mdlCard->mdlAnchor+mdlMenu"

I changed overflow: hidden to overflow: visible in the mdlCard css definition.

I think it is a bug in safari but for me the workaround is ok.

SabineMa on 24 May 2016

👍4

Might be a bug in how they are calculating the setup. overflow: hidden does make sense for what is happening but why is it being calculated as overflow? That is the odd bit.

Garbee on 24 May 2016

as far as I understand, overflow: hidden makes sense in the card. (as you are saying)

but if I use the card within the grid (together with a menu) then there is a problem.

It should be allowed/possible to use a card with a menu within a grid.
Do you want to proceed here or close this issue?

SabineMa on 24 May 2016

Cards can be used within a grid. As, this does work on other browsers (like Chrome and FF here.) This is a Safari-specific bug in the way they are interpreting things it seems.

The issue is valid, just nothing we can do unless someone has the time to dig into what is going on in WebKit. I'll leave it open until 2.x in case anyone from the community wants to dig in.

Garbee on 24 May 2016

ok. Perhaps later with 2.x then then I can remove my bugfix.
Please tell me if I can do something more here.

SabineMa on 24 May 2016

Thanks @SabineMa , your workaround worked for us!