Fix modal scrolling on mobile

[dankohn]

When you scroll in the modal, it works until you hit the Twitter area, and then scroll gets confused and you start scrolling the underlying cards instead. Please get Twitter embeds to function just like a normal part of the modal, so that scrolling on top of them does not act any differently.

Please ensure this works correctly on both portrait and landscape modes.

[dankohn]

I just confirmed that this bug appears on iPhones when you scroll over the Twitter area, but not when you shrink Chrome to a small window size and then use the scroll from the trackpad. So, the bug seems triggered by touch events. You'll need to use your phone to debug.

[dankohn]

Also, in the modal, the box for the logo in landscape mode is the full width of the screen. That's a bug because the box for the logo should always be proportional.

[alexkontsevoy]

@dankohn I've investigated this, the issue seems to be caused by Twitter iframe, it prevents scrolling and iOS behaves that way. The bad thing about this is that I have no control over Twitter timeline output.

@ZeusTheTrueGod please see if you can remove scrolling="no" property from Twitter iframe, maybe it will help. Otherwise we'll have to render the timeline as regular html and apply custom styles.

[dankohn]

Yes, I understand why it's tricky. I'd encourage posting an issue to stackoverflow if you can't figure out a resolution. I'm also open to bringing in a top CSS/iFrame expert, if you know one.

-- Dan Kohn dan@linuxfoundation.org Executive Director, Cloud Native Computing Foundation https://www.cncf.io +1-415-233-1000 https://www.dankohn.com

On Wed, Feb 21, 2018 at 7:54 AM, alexkontsevoy notifications@github.com wrote:

@dankohn https://github.com/dankohn I've investigated this, the issue seems to be caused by Twitter iframe, it prevents scrolling and iOS behaves that way. The bad thing about this is that I have no control over Twitter timeline output.

@ZeusTheTrueGod https://github.com/zeusthetruegod please see if you can remove scrolling="no" property from Twitter iframe, maybe it will help.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/cncf/filterable-landscape/issues/283#issuecomment-367316800, or mute the thread https://github.com/notifications/unsubscribe-auth/AC8MBg6I1XW13u_V_jpYNM2Dg4xUGfZRks5tXBIigaJpZM4SLi18 .

[AndreyKozlov1984]

I'll check what I can do

[AndreyKozlov1984]

We can get the twitter html on a server side, there are a lot of options how we can deal with this iframe

[dankohn]

Server-side would mean that tweets would be out of date. We're planning to update the static pages at most once per hour.

-- Dan Kohn dan@linuxfoundation.org Executive Director, Cloud Native Computing Foundation https://www.cncf.io +1-415-233-1000 https://www.dankohn.com

On Wed, Feb 21, 2018 at 8:17 AM, Andrey Kozlov notifications@github.com wrote:

We can get the twitter html on a server side, there are a lot of options how we can deal with this iframe

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/cncf/filterable-landscape/issues/283#issuecomment-367322705, or mute the thread https://github.com/notifications/unsubscribe-auth/AC8MBlbxuHXh68X7jfp9tMWPBqET4LIGks5tXBeBgaJpZM4SLi18 .

[AndreyKozlov1984]

So here are our options 1) Get rid of iFrame via fetching twitters data either every hour or set up a proxy to get tweets.

2) @alexcontini noticed that we don't have a problem when a modal popup is a fullscreen. The idea is to somehow draw the background on top of the left, top, right and bottom edges of the screen and then apply a mask. Or to apply a clip css propery, and then make the background fixed. This should work, just adds extra complexity

3) It could work if we put an almost transparent div (0.01) on top of a twitter , but then twitter timeline becomes non clickable.

[AndreyKozlov1984]

Beside that, here are pretty good css styles to make iPhone looking a bit better,

* {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

[AndreyKozlov1984]

I've made a prototype, https://fiddle.jshell.net/v84kp7on/42/show/dark/ When I run it on iPhone, I have a native page scroll with a background. The idea is to get a proper, may be even SVG, clip rect there. Finally, we would want to keep the scroll position, right now I have to use either scrollTop or just margin-top

[AndreyKozlov1984]

That prototype works well on iPhone, although in Chrome I can not scroll the main content that simple.

[AndreyKozlov1984]

@dankohn that is a proper link - https://fiddle.jshell.net/v84kp7on/42/show/light/ , I still want to figure out how to ensure that safari bottom bar does not appear / disappear on scroll up / down

[AndreyKozlov1984]

I've found that css trick to prevent possible issue with scroll: https://fiddle.jshell.net/v84kp7on/47/show/light/

[AndreyKozlov1984]

@dankohn , please check this one on your real iPhone, I think it behaves good enough

[AndreyKozlov1984]

A quick info how to use the link: The white space is our card content, which you can scroll together with tweets as much as you want. The content around the white card simulates the main content(logo, cards, etc) and with a proper shadow it will look like it is under the mask