search

usablica / intro.js

Lightweight, user-friendly onboarding tour library
http://introjs.com
Other
22.8k stars 2.59k forks source link

In FireFox Intro JS is highlighting at correct element but border and tooltip is at another place , It's working on Chrome and Safari properly #2068

Closed omkardhadame closed 2 months ago

omkardhadame commented 2 months ago

In FireFox Intro JS is highlighting at correct element but border and tooltip is at another place

Intro JS isuue with FireFox

const startTour = () => { introJs().setOptions({ steps: [{ element: 'Welcome to VEB', intro: "Welcome ....", }, { element: "#global-cart", intro: "You can review all the items added to the ‘Cart’, which can be used for scenario creation", }, { element: "#help-wizard", intro: "You can seek help in case of any queries. Also, you can submit your ideas and suggestions " + "for tool enhancement here.", }], showStepNumbers: true, showBullets: false, exitOnOverlayClick: false, overlayOpacity: 0.5, scrollToElement: true, disableInteraction: true, positionPrecedence: ['right', 'bottom', 'top', 'left'], highlightClass: 'introjs-highlighted', scrollPadding: 10, offset: 30, }).start(); }

omkardhadame commented 2 months ago

Issue is with Firefox browser only , as we have set the body zoom at 85% and firefox is not converting that zoom for Intro js as Chrome and Safari does ,

Hence in App.js under component did mount below code will work ...

const userAgent = navigator.userAgent.toLowerCase(); if (userAgent.includes('firefox'))

{ document.body.style.zoom = '100%'; } else { document.body.style.zoom = '85%';