Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Glitching Happening For Sticky Component - Mobile Browsers #472

Open
dschinkel opened this issue Jun 29, 2016 · 0 comments
Open

Glitching Happening For Sticky Component - Mobile Browsers #472

dschinkel opened this issue Jun 29, 2016 · 0 comments

Comments

@dschinkel
Copy link

dschinkel commented Jun 29, 2016

I'm noticing an entire screen repaint in Safari on my iPhone once I hit my sticky and the repaint is happening once the offsetTop kicks in for my sticky. The entire page goes white for a split second. Um, this is kinda a problem!

Here's a screencast demonstrating the problem. When you view this on my IPhone using Safari, it not only does that short jump down, but that causes Safari to blank out the entire screen for a split second. My wife noticed it as well.

https://www.youtube.com/watch?v=tXQXxGwmIfQ&feature=youtu.be
and another cast of it
https://www.youtube.com/watch?v=HRQViiVNknQ&feature=youtu.be

This is my React.js code.

import {Component,Store} from 'reactivate';
var ReactDOM = require('react-dom'),
    Scroll  = require('react-scroll'),
    DirectLink = Scroll.DirectLink,
    Link = require('react-router').Link;

const TableOfContents = Component({
    store: Store('/companies'),
    contextTypes: {
        router: React.PropTypes.func.isRequired
    },
    componentDidMount() {
        const el = ReactDOM.findDOMNode(this);
        new Ink.UI.Sticky(el,{offsetTop: 50, topElement: "#ft-company-profile", bottomElement: "#footer"});
    },
    render(){
        return (
            <div>
                <p className="margin-8"><span className="blue medium"><Link to="/">HOME</Link></span></p>
        )
    }
})

export default TableOfContents;

Second, I noticed that when I try to look at the INK site from my iPhone in various browsers (Safari, Chrome, Firefox) I'm not seeing your demos work at all. Here's what I see happening in each browser on my iPhone:

FireFox - I don't even see the sticky rendering in the demo at all

img_0287

Safari & Chrome - I see the sticky but you can't interact with the demo, meaning you can't scroll in that box at all:

img_0289

So I assume that this should be working. Why isn't it?

Right now I don't know if it's a problem on my side (how I've coded markup + using INK) or if there are real problems to be concerned about with INK sticky components.

@dschinkel dschinkel changed the title Glitching Happening For Sticky Component Glitching Happening For Sticky Component - Mobile Browsers Jun 30, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant