search

soflyy / oxygen-bugs-and-features

Bug Reports & Feature Requests for Oxygen
https://oxygenbuilder.com/
314 stars 29 forks source link

Active Tab :hover Transform effect is ignored #794

Open alexanderkladov opened 4 years ago

alexanderkladov commented 4 years ago

Describe the bug Active Tab in Tabs component ignores Transform effect on :hover, if there is a Transform effect already configured for regular Tab class.

Have you tried all the steps at https://oxygenbuilder.com/documentation/troubleshooting/troubleshooting-guide/? Yes

Are you able to replicate the issue on a Sandbox install at https://oxygenbuilder.com/try? https://oxygen-qpclypvylal7k.oxygen-demo.qsandbox.me/

To Reproduce Steps to reproduce the behavior:

  1. Add Tabs component
  2. Add a Transform effect (e.g. Translate X 10px) for :hover state for all Tabs (i.e. for class like tabs-6641-tab)
  3. Reset Transform effect (e.g. Translate X/Y/Z back to 0) for :hover state for the Active Tab (i.e. for class like tabs-6641-tab-active)

Expected behavior Active Tab should use it's own :hover configs.

What actually happens Transform reset gets ignored, and Active Tab still gets transformed on :hover. It works as expected in Oxygen builder (i.e. no Active Tab transform effects), but is broken on the front-end (i.e. Active Tab is transformed like as if it was a regular tab).

Desktop (please complete the following information):

KittenCodes commented 4 years ago

@alexanderkladov I haven't been able to replicate this behaviour on a clean Sandbox install - the tab classes work correctly. Please see: https://oxygen-qq65p7kcsln7k.oxygen-demo.qsandbox.me/tab-hover-test/.

If you're able to replicate this on a fresh Sandbox install, please send me the URL so that I can take a look. You can set up a Sandbox site here: https://oxygenbuilder.com/try/.

alexanderkladov commented 4 years ago

@KittenCodes here you go https://oxygen-q76vzqnfarn7k.oxygen-demo.qsandbox.me/tabs/

Barebones Oxygen install. Active tab should not animate on hover, but it does. Because setting Transform Translate to x=0 y=0 z=0 outputs the following on the front-end:

.tabs-4660-tab-active:hover {
    transform: ;
}
KittenCodes commented 4 years ago

@alexanderkladov Thank you for the link to the Sandbox site.

The issue isn't caused by the classes not being able to override each other. The problem is that when the transform > translate is set to 0, the class isn't created correctly which means it's overridden by the other tabs.

transform: ;

You can manually remove the transform > translate by adding the following CSS to the active tab via Advanced > Custom CSS:

    transform: none !important;

I will report this issue internally.