Search code examples
horizontal-scrollingandroid-browser

horizontal scroll on android chrome, works in funny way

in my site I have a responsive table, it is work fine on all browsers on Desktop (windows and Linux), but when I open the page with android chrome (and also ios browser) vertical scroll work just fine, but horizontal is messed up,

  • it works on last three rows of my table,

  • it doesn't work on upper rows of table

  • if I scroll down to see more rows, the problem still exist

  • I find one more interesting things, when I'm on the page, and horizontal scroll doesn't work well, and I open the setting of browser and closed it, after this horizontal scroll work fine on all rows.

address of the page:

http://yellowpart.ir/?product_cat=%D8%B4%D8%A7%D8%B3%DB%8C-%D9%BE%D8%A7%DB%8C%DB%8C%D9%86&product_list=149

Solution

  • It was because of "top" attribute, my table css was:

    table {
         top: 70vh;
}

    and it worked fine on pc, but somehow on android chrome, although I did scroll page and table to bottom of it but the table in first 70% of screen's height didn't worked, so I changed the code to :

    table{
      padding-top: 70vh;
}

    and it start to work fine on both desktop and android chrome.