Horizontal Scroling Bug

3 replies · opened Jun 28, 2021

PpauloequiJun 28, 2021

Hi there,
I made some changes in the OnePage Dark based site, but now it has a Horizontal scroll after other sessions are loaded.

This error occurs in google chrome browser only in mobile and in safari browser in both viewport.
Could you help me?

Also, the videos backgrounds aren't playing on the mobile devices.

SSemicolon WebSTAFFJun 28, 2021

Hello,

Please consider fixing the HTML Validation Errors: https://validator.w3.org/nu/?doc=http%3A%2F%2Fsantorinicapital.com.br%2Fsantorini.html as these issues sometimes arise due to Invalid HTML. If you are still facing further issues, we can definitely look into this for you. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

PpauloequiJun 28, 2021

Hello, I just checked it and fixed what it recommends, still have this scroll horizontally bug.
Could you help me?

Also, do you know why videos are not playing on mobile phones?

TKS

SSemicolon WebSTAFFJun 28, 2021
  1. Thanks for the Confirmation. Can you please let us know the exact viewport widths on which you are facing this issue.

  2. Apple and Android do not allow autoplay for HTML5 Videos/Audio to prevent unsolicited usage of Bandwidth (which can be Cellular) on the User’s Mobile Device. They can only be played on their native Video Player.

Here is the Official Reference for Apple: https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html .

Meanwhile, currently, the Inline Video Autoplay is supported only from iOS 10 onwards. You can use the following instructions to make it work on iOS 10 or above devices:

a. Add the playsinline Attribute to the <video> Tag. Example:
[ch_pre]<video id="slide-video" poster="images/videos/explore-poster.jpg" preload="auto" loop autoplay muted playsinline>
...
</video>[/ch_pre]

b. Then add the .no-placeholder Class to the .video-wrap Container that encloses the <video> Tag. Example:
[ch_pre]<div class="video-wrap no-placeholder">
<video poster="images/videos/explore-poster.jpg" preload="auto" loop autoplay muted playsinline>
...
</video>
<div class="video-overlay" style="background-color: rgba(0,0,0,0.55);"></div>
</div>[/ch_pre]

This should definitely work fine. Hope this Helps!

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard