盖茨比-页面刷新损坏 [英] Gatsby - page refresh corruption

问题描述

我在盖茨比(Gatsby)网站上的一页出现问题.

I have a problem with one page on my gatsby site.

如果我从其他任何页面转到该页面，则显示效果很好.但是，如果我直接点击链接，或者在加载后刷新页面，则该页面将无法正确呈现.其他所有页面都可以正常显示.与此不同的一件事是使用弹性显示布局.

If I go to that page from any other then it renders fine. But if I follow a link directly to it, or refresh the page once loaded then it does not render correctly. All of the other pages render fine. The one thing different about this is the use of flex display layout.

看看页面结构，它的呈现方式有所不同. HTML看起来几乎相同，但是gatsy设置的类和类属性是不同的.

Looking at the page structure, it's rendered differently. HTML looks pretty much the same, but the classes and class attributes set by gatsy are different.

这是相关页面: https://www.hazardousfrog.com/contact-us /

如果有人可以快速浏览一下，让我知道这是盖茨比问题还是我做错了什么，我将非常感谢.

If someone could take a quick look and let me know if this is a gatsby issue or something I have done wrong, I'd very much appreciate it.

推荐答案

查看之后，我认为这可能是您的错误.我在单独的选项卡中查看这两个页面，其中一个页面正确显示，而另一个页面则不正确.使用开发人员工具，我检查了表单组件，并发现它们加载了完全不同的样式.我无法确切告诉您是什么原因造成的，但是如果我不得不猜测可能是您的样式或类相互覆盖.

After looking at it I believe it may be an error on your end. I look at both pages in separate tabs, one rendered correctly and one not. With the developer tools I inspected the form components and saw that they were loading completely different styles. I wouldn't be able to tell you exactly what is causing this, but if I had to guess it could be that you have styles or classes that are overriding one another.

    //the form style when it is NOT rendered correctly
    .jss9 {
        margin: 0;
        border: 0;
        display: inline-flex;
        padding: 0;
        position: relative;
        min-width: 0;
        flex-direction: column;
        vertical-align: top;
    }

    //form styles when it IS rendered correctly
    .jss357 {
        display: flex;
        flex-wrap: wrap;
    }

这篇关于盖茨比-页面刷新损坏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！