OC2 Bootstrap Browser Compatibility

There are probably millions of older IOS devices like Ipad 1. out there that cannot be used with OC2 which uses Bootstrap for most of the CSS. The main issue is that the main drop down menus are partially hidden under the carousel and some other page elements due to a Z index problem.

If you have an old Ipad 1. you can clearly see this if you access the demo http://demo.opencart.com/ This is really an issue with older IOS Safari and Chrome browsers, as they are not able to be updated on older IOS devices to support Bootstrap.

Where do we go from here, you could delete -webkit-overflow-scrolling:touch; in both the bootstrap.css and bootstrap.min.css files which then makes the drop down menus appear ok, but this then disables the screen scrolling on these devices. Has anyone got a fix that could be added to the main CSS to disable scrolling on older IOS devices, or maybe there is another solution

minikits wrote:There are probably millions of older IOS devices like Ipad 1. out there that cannot be used with OC2 which uses Bootstrap for most of the CSS. The main issue is that the main drop down menus are partially hidden under the carousel and some other page elements due to a Z index problem.

If you have an old Ipad 1. you can clearly see this if you access the demo http://demo.opencart.com/ This is really an issue with older IOS Safari and Chrome browsers, as they are not able to be updated on older IOS devices to support Bootstrap.

Where do we go from here, you could delete -webkit-overflow-scrolling:touch; in both the bootstrap.css and bootstrap.min.css files which then makes the drop down menus appear ok, but this then disables the screen scrolling on these devices. Has anyone got a fix that could be added to the main CSS to disable scrolling on older IOS devices, or maybe there is another solution

Here it is possible to take advantage of mobile themes, which is compatible with version 2.x.

Hi I have tested many mobile OC2 themes on Demo websites for this same problem and none of them worked either as they also are using bootstrap. I think some CSS to detect older browsers to disable the -webkit-overflow-scrolling:touch; from the bootstrap.css might be the answer until the older devices are obsolete.

minikits wrote:Hi I have tested many mobile OC2 themes on Demo websites for this same problem and none of them worked either as they also are using bootstrap. I think some CSS to detect older browsers to disable the -webkit-overflow-scrolling:touch; from the bootstrap.css might be the answer until the older devices are obsolete.

Could it be that the in Ipad 1 missing CSS3 support? If it is true, who can do responsive design with CSS2?

It appears after testing some different templates that also use Bootstrap, that the standard CSS settings for Opencart 2 are causing the menu problem to IOs 5 and lower browsers. I will attempt to compare the main CSS files for the menu between OC2 and a working 3rd party template to see what it wrong. It could be that working 3rd party templates have CSS to override some Bootstrap settings to make it work on older browsers.

minikits wrote:It appears after testing some different templates that also use Bootstrap, that the standard CSS settings for Opencart 2 are causing the menu problem to IOs 5 and lower browsers. I will attempt to compare the main CSS files for the menu between OC2 and a working 3rd party template to see what it wrong. It could be that working 3rd party templates have CSS to override some Bootstrap settings to make it work on older browsers.

You try, how work this page:

http://demos.jquerymobile.com/1.4.5/

OC 2 does not need Jquery mobile as it uses Bootstrap which automatically adjusts for mobile views. We need to get well away from mobile specific websites as Google no longer recommends this, and I think that the Opencart developers have made a good decision to use Bootstrap and more ahead with the times. There is no point doing a new website that is non responsive, as there are and ever increasing number of different screen sizes.

We found that we can no longer use our Adobe CS6 software for the website development as Adobe appear to no longer support updates, and it does not render well on the screen with current website designs. After researching development tools that are specifically for bootstrap, we have chosen to try Pingrow which can be found at www.pinegrow.com It looks ideal for checking the code etc for the page elements so it might show some of the problems that we are seeing. This might be a useful tool for other Opencart 2 developers to use.

Added the following to the main OC-2 CSS file to add a Z index to the nav bar menu so that the drop down menu it is not hidden under other page elements on older Safari browsers, e.g. Ipad1.

/*Added for Top menu for Ipad1*/
.navbar {
z-index: 4;
}