Bug: [DebugBar] Rotation applied outside of toolbar

codeigniter4 / CodeIgniter4

Open Source PHP Framework (originally from EllisLab)

https://codeigniter.com/

MIT License

5.4k stars 1.9k forks source link

Bug: [DebugBar] Rotation applied outside of toolbar #7875

Closed sanchawebo closed 1 year ago

sanchawebo commented 1 year ago

PHP Version

8.1

CodeIgniter4 Version

4.4

CodeIgniter4 Installation Method

Composer (using codeigniter4/appstarter)

Which operating systems have you tested for this bug?

macOS

Which server did you use?

apache

Database

MySQL 5.7.39

What happened?

Since the new update (4.4) a rotation-css-rule is applied to my icons.

Steps to Reproduce

Place an element with the rotate-class anywhere on a page where the toolbar is active.

Expected Output

No rotation.

Anything else?

In vendor/codeigniter4/framework/system/Debug/Toolbar/Views/toolbar.css I found this rule:

/* ENDLESS ROTATE */
.rotate {
  animation: rotate 9s linear infinite;
}

This rule gets applied to my own elements which have the rotate-class, as it is not scoped.

sanchawebo commented 1 year ago

Workaround:

Change rotate to .debug-bar-rotate (or anything else) in vendor/codeigniter4/framework/system/Debug/Toolbar/Views/toolbar.css
Change/Rename all occurences of rotate to debug-bar-rotate in vendor/codeigniter4/framework/system/Debug/Toolbar/Views/toolbar.js
(Optional) Change the name of the animation in toolbar.css to something different.

kenjis commented 1 year ago

Thank you for reporting.

The class="rotate" is too big. It should be, e.g., class="toolbar rotate".

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAABNklEQVR4nN2US04CQRCGv/DaiBxEvYWuBRPDKSCIXsCdcg0ULqTI8xIGN7JwTCU/ScV5tTO64Us6maSq/7+nuqvgkLgHopTl+QAWwBToAg3+wMTzM7YBrihp4jkCToEB8OJyRkCFAB5yDDxVoAd8OpNMOkrcAeMAgz3nzsQ0EqkDayXZqXy5Qugrdy2tGNdKeNWv40xCqGpvJK0YEwXt8ooylMZzUnCh4EkJgzNpmFaMrYLNEgbH0thmGVhSUVrSeE8KLv+7RBMFb0oY3EnDeihGN+WZhmJ7ZlnPtKHB5RvtNwy0d5XWaGgqRmp7a/9QLjRevoDLvOSRM+nnlKumk++0xwZlLhVnEulOhnohTS37vnU1t5M/ho7rPR03/LKW1bxNQep6ETZb5mpGW2/Ak2KpF3oYfAPX9Xpc671kqwAAAABJRU5ErkJggg==" class="rotate">

kenjis commented 1 year ago

PR for fixing this issue is welcome! https://github.com/codeigniter4/CodeIgniter4/blob/develop/contributing/pull_request.md