search

bennyxguo / hexo-theme-obsidian

🎨 A dark Hexo theme, it's responsive, simple but elegant.
https://obsidian.tridiamond.tech/
MIT License
778 stars 109 forks source link

[UI] Lost article header cover when using iPhone browser #136

Open zhenyuan0502 opened 3 years ago

zhenyuan0502 commented 3 years ago

When I scroll down, it flashes a bit and then losing background Here is the screenshot. image

I can't debug in mobile browser and can't see what happen, whereas PC's browser look good no problem with mobile size when I'm debugging. Browser: Safari & Edge in iOS 14.4.2

Here is my temporary video, ping me edit if it's downed https://streamable.com/g830ec

I will test more with few devices to trace back.

bennyxguo commented 3 years ago

@zhenyuan0502 Interesting find there, as I am working on the new theme Aurora, This theme is less actively maintained, but will look into this issue when I have time.

For the mean time, check out my new theme Aurora.

At the end, thanks for reporting this issue~

zhenyuan0502 commented 3 years ago

@bennyxguo I have just comeback for writing blog, so I have come to debug it in detail on my iPhone. I found out that the fadeIn js cause flash for all over iPhone's browser, from Edge to Safari, Opera, Chrome.

 <div class="article-cover animated fadeIn" style="
            animation-delay: 600ms;
            animation-duration: 1.2s;
            background-image: 
                radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.65), #100e17),
                url(/img/cover.jpg) ">
</div>

The version cause bug is animate 3.7.2, so I tried updating to newest 4.1.1 and it is fixed well. So just open head.js, replace

cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css

To 

cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css

I deployed fix on my blog: https://nguyenluu.dev, you could compare with yours current

CC @kcn3388 if you are aware this bug