Result in Safari different than Chrome

[pgaston]

Okay, only a couple weeks in on Polymer - so I could be way off base... I'm trying to build a responsive web site that works in iOS - hence Safari.

Case 1 - Wide: Show two columns side-by-side Case 2 - Narrow: Drop the first column, only show the second full width.

For case 1 it's pretty easy to use in my case m3 and m9, e.g.,

<iron-grid>
    <div class="m3">foo</div>
    <div class="m9">bar</div>
</iron-grid>

For case 2 the 'obvious' thing to me is throw in an s0, or...

<iron-grid>
    <div class="s0 m3">foo</div>
    <div class="m9">bar</div>
</iron-grid>

This works well on Chrome. Two columns wide, drops/hides first column on small.

foo     bar

on 's' it is...

bar

On Safari it screws up. For the wide case it shows the first column, 'foo', but then goes to the next line to show 'bar'. i.e., output for 'm' is:

foo
bar

It works correctly on 's' then, i.e.,

bar

Hint/idea -- It turns out that if I make the second column into an 's8' it will fit on one row. In other words, somehow the 's0' could be taking up just enough space to screw up the math for the 12 columns.

Microsoft Edge Not to confuse the above point - Edge works for 's' and 'm/l/xl', but when I get to 'xs' in the above case it reverts back to using the rules for 'm'. i.e., I thought the rule was for xs was to use the next larger size specified, i.e., it should behave like 's', not 'm'???

Or am I lost?

Thanks again - this seems like a great tool!!!

[ozwaldorf]

@pgaston I cannot test either of these browsers as I am on linux.

Did you test safari on a mobile device? Microsoft Edge: Try resizing the window and see if it updates the size. (As far as I can tell, correct me if I'm wrong) Microsoft Edge doesn't support Web-Components as it is still using IE's 20 year old DOM. I know they were working on a new DOM, but I don't know if that has been released yet.

[pgaston]

Here are screen shots from iPad - landscape shows error (m) where m3 and m9 don't go on same line as an s0 seems to take up some space. See the next line where an s8 fits.

Portrait is correct (s) as it hides the first column. Key test is the first 2 in landscape, 1 in portrait. Rest are other tests. (Next time I'll do good colors!!)

p

Sent from my iPad

On 4 May 2016, at 9:28 PM, Ossian Mapes notifications@github.com wrote:

@pgaston I cannot test either of these browsers as I am on linux.

Did you test safari on a mobile device? Microsoft Edge: Try resizing the window and see if it updates the size.

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub

[ozwaldorf]

Your pictures didn't show up :/

And Microsoft Edge doesn't support Web Components.

[pgaston]

I'll send as attachments (in morning). Edge is of low importance to me anyway - though I was sorta hoping polymer did that 'polyfill' thing to make it work there. Perhaps that's the Safari case as well - an imperfect 'polyfill' implementation. (If I'm using that term correctly.)

Thanks for your time and your element, btw!!!

On Wednesday, 4 May 2016, Ossian Mapes notifications@github.com wrote:

Your pictures didn't show up :/

And Microsoft Edge doesn't support Web Components.

[image: screenshot from 2016-05-04 21-38-33] https://cloud.githubusercontent.com/assets/8976745/15034152/a48575b2-1240-11e6-8aea-8b18720eda71.png

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/The5heepDev/iron-grid/issues/19#issuecomment-217055770

[pgaston]

and sorry - here was the source...

foo s0/m3

bar s12/m9

```

kil s0/m3

roy s12/m8

base m3

case m9

more s0 m6

fun m9

```

On Thu, May 5, 2016 at 8:47 AM Peter Gaston peter.gaston@gmail.com wrote:

On Wed, May 4, 2016 at 9:44 PM Peter Gaston peter.gaston@gmail.com wrote:

I'll send as attachments (in morning). Edge is of low importance to me anyway - though I was sorta hoping polymer did that 'polyfill' thing to make it work there. Perhaps that's the Safari case as well - an imperfect 'polyfill' implementation. (If I'm using that term correctly.)

Thanks for your time and your element, btw!!!

On Wednesday, 4 May 2016, Ossian Mapes notifications@github.com wrote:

Your pictures didn't show up :/

And Microsoft Edge doesn't support Web Components.

[image: screenshot from 2016-05-04 21-38-33] https://cloud.githubusercontent.com/assets/8976745/15034152/a48575b2-1240-11e6-8aea-8b18720eda71.png

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/The5heepDev/iron-grid/issues/19#issuecomment-217055770

[pgaston]

Boy - getting images here via email doesn't seem to work. Here are two screenshots from an iPad - error seen in landscape mode (m).. Works great in portrait mode (s).

[ozwaldorf]

@pgaston Ok. Looking at your code, you should only have 1 iron grid. The columns will automatically wrap around after 12 are filled.

[pgaston]

Okay, I made it with one iron-grid. I also tried webcomponents.js instead of webcomponents-lite.js (the polyfill thingie.) No difference in behavior.
Currently at https://custonboard.firebaseapp.com/ Thx!

[bobvanluijt]

How did this end?

[pgaston]

Net is I'm using the component (thanks!) but I decided to use workarounds on that issue - specifically not trying to make a column disappear. Essentially

• Simplifying things, e.g., focus on xs (phone), s (pad and up)
• making sure all rows were filled up to 12 before moving on, i.e., some columns were just placeholders

So I don't know if that bug I found is gone - but it's certainly not mission critical!

Here's an example - https://knowyourcustomer-baf6c.firebaseapp.com/